<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<input id="file" type="file" name="name"/>
<hr>
<div id="videoPreview">
    <input type="text" id="thumbnail">
</div>
</body>

<script src="js/jquery.js"></script>
<script type="text/javascript">
    $("#file").on('change', function (e) {
        var files = e.target.files;
        console.log(files[0]);

        creatImg(files[0]);

        /*var formdata = new FormData();
        formdata.append("bussinessType","SQ");
        formdata.append("orderCode","20180116DEF3B6");
        formdata.append("uploadFileList", files[0]);
        $.ajax({
            url: 'http://10.8.30.55/bxld-web/weixinFile/upload',
            type: "POST",
            processData: false,
            contentType: false,
            data: formdata,
            success: function(data){
                console.log(data);
                if(data.repCode = "000000"){
                    console.log("附件上传成功！");
                }
            },
            error:function(){
                console.log("附件上传失败");
            }
        });*/

    });


    //生成预览图
    function creatImg(stream) {
        var video = document.createElement('video');
        video.addEventListener('loadedmetadata', function loadedmetadata() {
            var canvas = document.createElement('canvas');
            canvas.width = this.videoWidth;
            canvas.height = this.videoHeight;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(this, 0, 0);

            var image = new Image();
            image.src = canvas.toDataURL('image/png');
            image.onload = function () {
                var formData = new FormData();
                formData.append('uploadFileList', dataURItoBlob(canvas.toDataURL('image/png')), Math.random() +'.png');
                console.log(dataURItoBlob(canvas.toDataURL('image/png')), Math.random() +'.jpg');
            };

        }, false);
        video.src = URL.createObjectURL(stream);
        video.play();
    }

    function dataURItoBlob(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for (var i = 0; i < binary.length; i += 1) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], { type: 'image/png' });
    }

</script>
</html>